<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>winter-1</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/animation.css">
</head>

<body>

    <div class="header">

        <img class="header-banner" src="./img/index-bannner.png" >
        <div class="header-bg clearfloat">       
            <div class="public-container">
                <!-- <div class="logo"><img src="./img/top-img.png"></div> -->
                <div class="header-headline">Animal Photography</div>
                <div class="header-subline">
                A silhouette of them, a simple little acttion, here are the photographer's 
                eyes the best of them, their laughter, their love, their every vivid, are recored 
                by us.
                </div>
                <button class="header-more">EXPLORE</button>
            
                <div class="header-photos">
                    <img class="header-1" src="./img/header-1.png" >
                    <img class="header-2" src="./img/header-2.png" >
                    <img class="header-3" src="./img/header-3.png" >
                </div>
            </div>
        </div>
        
            <img class="header-img" src="./img/index-bg.png">
            <div class="sign-bg clearfloat">
            <div class="public-container">
                <div class="intro-box">
                    <div class="intro">
                            “Family Farms is the best place，where I can buy fruit,vegetable,meat,honey,milk,
                            eggs and so on for my retaurant directly fromupplier. Super convinient.Thank you”
                    </div>
                    <button class="signup">SIGN UP</button>
                <!-- </div> -->
            </div>
        
        </div>
        
    </div>

<!-- main part ------------------------------------------------------------------------>
    <div class="main">
        <div class="main-bg">
            <div class="public-container">
                <div class="main-difference">
                    <div class="main-headline">Difference</div>
                    <div class="main-photos">
                        <div class="photo-box photo-box1">
                            <img src="./img/img-horse.png">
                            <div class="main-photos-font">Horse</div>
                            <div class="underline">A difference story</div>
                        </div>
                        <div class="photo-box photo-box2">
                            <img src="./img/img-kangroo.png">
                            <div class="main-photos-font">Kangaroo</div>
                            <div class="underline">A difference story</div>
                        </div>
                        <div class="photo-box photo-box3">
                            <img src="./img/img-lion.png">
                            <div class="main-photos-font">Lion</div>
                            <div class="underline">A difference story</div>
                        </div>
                        <div class="photo-box photo-box4">
                            <img src="./img/img-bird.png">
                            <div class="main-photos-font">Hummingbird</div>
                            <div class="underline">A difference story</div>
                        </div>
                    </div>
    
                    <div class="main-photo">
                        <img src="./img/main-bg.png">
                        <div class="main-photo-text">
                            “Family Farms is the best place，where I can buy fruit,vegetable,meat,honey,milk,
                            eggs and so on for my retaurant directly fromupplier. Super convinient.Thank you”
                        </div>
                    </div>
                    <button class="knowmore">Know more</button>
                </div>
            </div> 
        </div>
        
    </div>

<!-- footer-part -------------------------------------------------------------------->
    <div class="footer">
        <div class="footer-bg">
            <div class="public-container">
                <div class="footer-box">
                    <div class="footer-more">
                        <div class="footer-left">
                            <div>IN THE WILD</div>
                            </br>
                            <div>IN THE SEA</div>
                        </div>
                        
                        <div class="footer-right">
                            <div>MORE</div>
                            <div>We create art.
                                We create life</div>
                        </div>
                    </div>
                    <div class="footer-click">
                        <button class="bigworld">Big World</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>